<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Progress Bar Comparisons</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<h1>Progress Bar Layout Error</h1>
<div id="content">
	<div id="none">
	
	
		<p>Without <code>margin</code> or <code>padding</code> applied to 
		the <code>.progressBar</code> or <code>.progressBackground</code> element
		the progress bars will look like this:</p>
	
	
		<span class="progressContainer">
			<span class="progressBackground">
				<span class="progressBar"/><span>Progress bar at 100%</span></span>
				<p class="progressMessage">Message</p>
			</span>
		</span>
		
		<span class="progressContainer">
			<span class="progressBar"/><span>Progress bar at 100%</span></span>
			<p class="progressMessage">Without <code>.progressBackground</code> wrapper</p>
		</span>
	
	</div>
	
	<div id="good">
	
		<p>With  applied to the <code>.progressBackground</code> we can 
		achieve the desired look:</p>
	
		<span class="progressContainer">
			<span class="progressBackground">
				<span class="progressBar"/><span>Progress bar at 100%</span></span>
				<p class="progressMessage">Message</p>
			</span>
		</span>
	
	</div>
	
	<div id="bad">
		<p>but if you try to do the same with <code>margin</code> applied to 
		the <code>.progressBar</code> and not the <code>.progressBackground</code> wrapper
		it will break as it expands in size:</p>
	
		<span class="progressContainer">
			<span class="progressBackground">
				<span class="progressBar"/><span>Progress bar at 100%</span></span>
				<p class="progressMessage">Message</p>
			</span>
		</span>
	
	</div>
	
	<div id="designer">
		<p>so with the extra <code>.progressBar</code>  wrapper, the designer is 
		free to apply <code>margin</code> and <code>padding</code> to the 
		<code>.progressBackground</code> and <code>.progressContainer</code> 
		without breaking the progress bar:</p>
	
		<span class="progressContainer">
			<span class="progressBackground">
				<span class="progressBar"/><span>Progress bar at 100%</span></span>
				<p class="progressMessage">Message</p>
			</span>
		</span>
	
	</div>

<div>


<div id="where-from">
	From <a href="http://advanceddomscripting.com" title="AdvancED DOM Scripting">AdvancED DOM Scripting</a> 
	| <a href="http://www.amazon.com/exec/obidos/ASIN/1590598563/jeffreysamb05-20" title="Buy it on Amazon">Paperback</a>
</div>
</body>

</html>
